<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: boBrother
 * @LastEditTime: 2022-01-06 20:29:59
-->
<template>
  <div id="bottpm4Container" ref="bottom4Container" style="height: 95%">
    <!-- <div class="vedio"></div> -->
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
import { DualAxes } from "@antv/g2plot";
import moment from "moment";
export default {
  data() {
    return {
      deviceData: [],
      videoData: [],
      params: {
        page: 1,
        pageSize: 20,
      },
      dualAxes: null,
    };
  },
  computed: {
    chartData() {
      return this.deviceData.map((item) => {
        return {
          date: moment(item.insert_time).format("hh:mm"),
          wind_speed: parseFloat(item.wind_speed),
          wind_direction: parseFloat(item.wind_direction),
        };
      });
    },
    dualAxesData() {
      return [this.chartData, this.chartData];
    },
  },
  methods: {
    // 检索设备数据
    queryTodayData() {
      get("/dashboard/pageQueryData", {
        ...this.params,
        device_id: 28,
      }).then((res) => {
        // console.log(res.data.list);
        this.deviceData = res.data.list;
        // console.log(res.data.list[0].insert_time);
        // console.log(res.data.list[0].wind_direction);
        this.loadCharts();
      });
    },
    // 图表初始化方法
    loadCharts() {
      if (this.dualAxes) {
        this.dualAxes.destroy();
      }
      this.dualAxes = new DualAxes("bottpm4Container", {
        data: this.dualAxesData,
        xField: "date",
        yField: ["wind_speed", "wind_direction"],
        geometryOptions: [
          {
            geometry: "line",
            color: "#5B8FF9",
          },
          {
            geometry: "line",
            color: "#5AD8A6",
          },
        ],

        xAxis: {
          // range: [0, 1],
          label: {
            style: {
              fill: "rgba(255,255,255,.7)",
            },
          },
        },
        yAxis: {
          wind_speed: {
            label: {
              style: {
                fill: "rgba(255,255,255,.7)",
              },
            },
            grid: {
              line: {
                // 设置辅助线样式
                style: {
                  lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                  strokeOpacity: 0.2, // 辅助线透明度
                },
              },
            },
          },
          wind_direction: {
            label: {
              style: {
                fill: "rgba(255,255,255,.7)",
              },
            },
            grid: {
              line: {
                // 设置辅助线样式
                style: {
                  lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                  strokeOpacity: 0.2, // 辅助线透明度
                },
              },
            },
          },
        },
        legend: {
          // layout: 'horizontal',
          // position: 'right'
          itemName: {
            style: {
              // color: "#000",
              fill: "rgba(255,255,255,.7)",
            },
          },
        },
      });
      this.dualAxes.render();
    },
  },

  mounted() {
    this.queryTodayData();
    setInterval(() => {
      // this.loadCharts();
      this.queryTodayData();
    }, 6000);
  },
};
</script>
